<template>
	<view class="feedback-box center column">
		 <radio-group class="radio-group" @change="radioChange">
		 	<label class="label">
				<radio value="1" checked color="#007aff" style="transform: scale(0.7);" />内容意见
			</label>
			<label class="label">
				<radio value="2" color="#007aff" style="transform: scale(0.7);" />产品建议
			</label>
			<label class="label">
				<radio value="3" color="#007aff" style="transform: scale(0.7);" />其他
			</label>
		 </radio-group>
		 
		 <textarea v-model="formData.content" maxlength="500" placeholder="请填写具体内容帮助我们了解您的意见和建议"></textarea>
		 <input v-model="formData.qq" maxlength="15" placeholder="填写你的QQ" type="text">
		 <input v-model="formData.weixin" maxlength="15" placeholder="填写你的微信" type="text">
		 
		 
		 
		 <!-- #ifdef APP-PLUS -->
		 <view class="location">
		 	<view>你的当前位置：</view>
		 	<text>{{location ||'获取信息中'}}</text>
		 </view>
		 <!-- #endif -->
		 <button :loading="loading" type="primary" @click="submitHandler">提交</button>
	</view>
</template>

<script>
	import api from '@/api/system.js'
	export default {
		data() {
			return {
				formData:{//表单数据
					type:1,
					content:'',
					qq:'',
					weixin:''
				},
				location:'', //当前位置
				loading:false
			}
		},
		onLoad() {
			//#ifdef APP-PLUS
			uni.getLocation({
				geocode:true,
				success: (res) => {
					// console.log('res',res);
					
					// 创建地图坐标对象
					var point = new plus.maps.Point(res.longitude, res.latitude);
					plus.maps.Map.reverseGeocode(point, {},(event)=>{
						var address = event.address; // 转换后的地理位置
						var point = event.coord; // 转换后的坐标信息
						var coordType = event.coordType; // 转换后的坐标系类型
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						var addressList = address.match(reg).toString().replace(/,/g,"");;
						//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
						let city = addressList.length == 3?addressList[1]:addressList[0];
						this.location = addressList
						// console.log("addressList",addressList);
						},
						function(e) {
							console.log("失败回调",e);
						}
					);
				}
			})
			// #endif
		},
		methods: {
			radioChange(event){
				// console.log(event.detail.value)
				this.formData.type = Number.parseInt(event.detail.value) 
			},
			
			//提交反馈意见
			async submitHandler(){
				if(!this.formData.content ||  this.formData.content.trim().length <10){
					this.$util.msg('反馈内容至少输入10个字')
					return
				}
				
				if(!this.formData.qq && !this.formData.weixin){
					this.$util.msg('QQ和微信至少填写一个')
					return
				}
				
				if(this.formData.qq && !this.$util.checkStr(this.formData.qq,'QQ')){
					this.$util.msg('QQ填写错误')
					return
				}
				
				if(this.formData.weixin && !this.$util.checkStr(this.formData.weixin,'weixin')){
					this.$util.msg('微信填写错误')
					return
				}
				
				//调用提交接口
				this.loading = true
				uni.showLoading({
					title:'提交中',
					mask:true,
				})
				
				const res = await api.addFeedback(this.formData)
				//将按钮设置为可点击
				
				//关闭加载
				uni.hideLoading()
				
				if(!res.code === 200){
					this.$util.msg(res.msg)
					this.loading = false
					return
				}
				
				uni.showModal({
					content:'你的意见反馈成功!',
					showCancel:false,
					success: () => {
						this.navBack()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $mxg-color-grey;
}
.feedback-box{
	padding: 0 30rpx;
}

.radio-group{
	margin:30rpx 0;
	.label{
		margin-right: 30rpx;
		font-size: 30rpx;
		color: $mxg-text-color-black;
	}
}

textarea{
	border: 1px solid #e9e9e9;
	width: 100%;
	padding: 10rpx;
	line-height: 60rpx;
}
input{
	width: 100%;
	border: 1px solid #e9e9e9;
	margin-top: 30rpx;
	padding: 10rpx;
	height: 70rpx;
}
.location{
	margin: 50rpx 0;
	align-self: flex-start;
	font-size: 30rpx;
	color:$mxg-text-color-grey;
	line-height: 50rpx;
	text{
		color: $mxg-text-color-black;
	}
}

button[type=primary]{
	width: 100%;
	margin-top: 50rpx;
	background-color: $mxg-text-color-blue !important;
}
.button-hover[type=primary]{
	width: 100%;
	margin-top: 50rpx;
	background-color: $mxg-color-primary !important;
}
</style>
